<template>
	<!-- 底部部分 -->
	<footer class="footer">
		<span class="todo-count"
			><strong>{{ leftcount }}</strong
			>剩余</span
		>
		<ul class="filters">
			<li>
				<a :class="{ selected: type === 'all' }" href="#/" @click="filter('all')">全部</a>
			</li>
			<li>
				<a :class="{ selected: type === 'active' }" href="#/active" @click="filter('active')"
					>进行中</a
				>
			</li>
			<li>
				<a
					:class="{ selected: type === 'completed' }"
					href="#/completed"
					@click="filter('completed')"
					>已完成</a
				>
			</li>
		</ul>
		<button class="clear-completed" @click="clear">清除已完成</button>
	</footer>
</template>

<script>
import { mapState } from 'vuex'
export default {
	name: 'TodoFooter',
	computed: {
		...mapState(['todos', 'type']),
		leftcount() {
			return this.todos.filter(item => !item.isDone).length
		},
	},
	methods: {
		filter(type) {
			this.$store.commit('changeType', type)
		},
		// 清除已完成，不知道接口，没写
		clear() {},
	},
}
</script>

<style></style>
